<template>
	<div class="LoginRegister">
		<div class="main">
			<div class="left">
				<img src="../../assets/img/login/swiper.png" />
			</div>
			<div class="form">
				<div class="row tit">
					<span>用户</span>信息/注册
				</div>
				<label-input v-for="(item, key, index) in LabelInput" :key="index" :LabelInput="item"></label-input>

				<div class="row">
					<div class="btnwxok" @click="LoginRegist">
						提交</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import api from '../../fetch/api'
	export default {
		name: "LoginRegister",
		data() {
			return {
				NavName: "用户信息  /  注册",
				LabelInput: [{
						Star: false,
						label: "用户姓名",
						name: "",
						textsta: true,
						text: "name",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '100px',
							inputwidth: '330px',
						}
					},
					{
						Star: false,
						label: "手机号码",
						name: "",
						textsta: true,
						text: "phone",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '100px',
							inputwidth: '330px',
						}
					},
					{
						Star: false,
						label: "短信验证",
						name: "",
						textsta: true,
						text: "code",
						buttonStart: true,
						buttonText: "获取验证码",
						showpassword: false,
						style: {
							labelwidth: '100px',
							inputwidth: '330px',
						}
					},
					{
						Star: false,
						label: "登录账号",
						name: "",
						textsta: true,
						text: "account",
						buttonStart: false,
						buttonText: "",
						showpassword: false,
						style: {
							labelwidth: '100px',
							inputwidth: '330px',
						}
					},
					{
						Star: false,
						label: "登录密码",
						name: "",
						textsta: true,
						text: "password",
						buttonStart: false,
						buttonText: "",
						showpassword: true,
						style: {
							labelwidth: '100px',
							inputwidth: '330px',
						}
					},
					{
						Star: false,
						label: "再次输入",
						name: "",
						textsta: true,
						text: "repassword",
						buttonStart: false,
						buttonText: "",
						showpassword: true,
						style: {
							labelwidth: '100px',
							inputwidth: '330px',
						}
					},

				],
				lRegist: {
					phone: "", // => '请输入电话',
					name: "", //=> '请输入用户名',
					code: "", // => '请输入验证码',
					account: "", //=> '请输入登录名',
					password: "", // => '请输入密码',
					repassword: "", // => '2次密码不一致'}
				}
			}
		},
		computed: {
			...mapGetters([
				'loginRegist',
				'login_code_start',
				'login_pass_start',
				'login_register_start'

			])
		},
		mounted() {
			if (this.$api.getQueryString("unionid") != null) {
				for (var i = 0; i < this.LabelInput.length; i++) {
					if (this.LabelInput[i].text === "name") {
						this.LabelInput[i].name = this.loginRegist.name
					}
					if (this.LabelInput[i].text === "phone") {
						this.LabelInput[i].name = this.loginRegist.phone
					}
					if (this.LabelInput[i].text === "code") {
						this.LabelInput[i].name = this.loginRegist.code
					}
					if (this.LabelInput[i].text === "account") {
						this.LabelInput[i].name = this.loginRegist.account
					}
					if (this.LabelInput[i].text === "password") {
						this.LabelInput[i].name = this.loginRegist.password
					}
					if (this.LabelInput[i].text === "repassword") {
						this.LabelInput[i].name = this.loginRegist.repassword
					}
				}
				this.LoginRegistAdd()
			}
		},
		methods: {
			...mapActions({
				getloginRegist: 'getloginRegist',
				setLogincodestart: 'setLogincodestart',
				setLoginpassstart: 'setLoginpassstart',
				setLoginregisterstart: 'setLoginregisterstart'
			}),
			tologin() {
				this.$router.push('/LoginIndex')
			},
			LoginRegistAdd() {
				var req_loginRegist = JSON.parse(JSON.stringify(this.loginRegist)); //this.templateData是父组件传递的对象
				req_loginRegist["wx_unionid"] = this.$api.getQueryString("unionid")
				this.$api.GetLoginRegistAdd(req_loginRegist)
					.then(res => {
						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								if (res.code === 200) {
									this.$router.push("/LoginIndex")
								}
							}
						});
					})
			},
			LoginRegist() {
				if (this.loginRegist.name === "") {
					
					this.$alert('请输入用户名', '提示', { confirmButtonText: '确定', 	});
					return;
				}
				if (this.loginRegist.phone === "") {
					this.$alert('请输入电话', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.loginRegist.code === "") {
					this.$alert('请输入验证码', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.loginRegist.account === "") {
					this.$alert('请输入登录名', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.loginRegist.password === "") {
					this.$alert('请输入密码', '提示', { confirmButtonText: '确定', });
					return;
				}
				if (this.loginRegist.repassword === "") {
					this.$alert('请重复输入密码', '提示', { confirmButtonText: '确定', });
					return;
				}
				// 				if (this.loginRegist.repassword != this.loginRegist.password) {
				// 					alert("两次密码不一致")
				// 					return;
				// 				}
				this.$api.GetLoginRegist(this.loginRegist)
					.then(res => {
						if (res.code === 100) {
							window.location.href = res.url
						} else {
							this.$alert(res.meg, '提示', { confirmButtonText: '确定', });
						}
					})
			},
			getsontext(res) {
				var req_loginRegist = JSON.parse(JSON.stringify(this.loginRegist)); //this.templateData是父组件传递的对象
				req_loginRegist[res.text] = res.name;
				this.getloginRegist(req_loginRegist)
			},

			getRedcode(LabelInput) {
				var _this = this;
				this.$api.GetRedcode({
						phone: this.loginRegist.phone
					})
					.then(res => {
						this.$alert(res.meg, '提示', { confirmButtonText: '确定',callback: action =>{
							
							if (res.code === 200) {
								var n = 59
								var setter = setInterval(function() {
									LabelInput.buttonText = n;
									LabelInput.disabled = true;
									if (n < 1) {
										LabelInput.buttonText = "获取验证码";
										LabelInput.disabled = false;
									}
									n--;
								}, 1000)
								setTimeout(function() {
									clearInterval(setter)
								}, 61000)
							}
						} });
					})
			},
		},
	}
</script>

<style lang="less">
	.LoginRegister {
		width: 100%;
		height: 100%;
		position: absolute;
		padding: 65px 0;
		box-sizing: border-box;
		background: url("../../assets/img/login/bg.png") no-repeat center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.main {
			width: 907px;
			height: 527px;
			background: url("../../assets/img/login/reg-bg.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;

			.left {
				width: 50%;
				height: 100%;
			}

			.form {
				width: 50%;
				height: 100%;
				// margin: 0 auto;
				box-sizing: border-box;
				color: #fff;

				.row {
					box-sizing: border-box;
					display: flex;
					justify-content: center;

					&.tit {
						font-size: 18px;
						justify-content: flex-start;
						padding-left: 40px;
						padding-top: 27px;
						margin-bottom: 30px;
						box-sizing: border-box;

						span {
							display: block;
							padding-bottom: 5px;
							border-bottom: 1px solid #9a9cef;
						}
					}

					.btnwxok {
						width: 145px;
						height: 35px;
						background: #ffd31d;
						color: #fff;
						font-weight: bold;
						margin-right: 30px;
						margin-top: 30px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50px;
						box-shadow: 0 0 8px rgba(0, 0, 0, .5);
					}
				}

				.LabelInput {
					flex-wrap: wrap;
					padding: 5px 80px 5px 40px;
					box-sizing: border-box;

					label {
						width: 100%;
						text-align: left;
						color: #fff;
					}

					.el-input-box {

						width: 100%;
						position: relative;

						.el-button {
							width: 85px;
							position: absolute;
							right: 0;
							bottom: 10px;
							background: none;
							color: #fff;
							border: 1px solid #9a9cef;
							border-radius: 50px;
							padding: 0;
							font-size: 12px;
						}

						.el-input__inner {
							height: 30px;
							line-height: 30px;
							border: 0;
							color: #fff;
							border-bottom: 1px solid #9a9cef;
							border-radius: 0;
						}

						input {
							background: none;
							padding: 0;
						}
					}
				}
			}
		}
	}
</style>
